<template>
    <div class="previewAdd">
        <div class="rx-center" v-for="(row,index) in layoutList" :key="index">
            <span class="rx-center-name">{{row.config.name}}</span>
            <div class="rx-center-add" @click="addColumn(row,index)"><my-icon type="iconjia" style="margin-right: 5px"></my-icon>{{$ti18('rxList.addBtn','添加')}}</div>
        </div>
        <a-empty v-if="layoutList.length==0" />
    </div>
</template>
<script>
    import insPortalUserDefApi from '@/api/portal/core/insPortalUserDef'
    import {RxDialog, BaseList} from "@lowcode/jpaas-common-lib";
    import insPortalDefApi from "@/api/portal/core/insPortalDef";


    export default {
        name: 'InsPortalUserDefEdit',
        mixins: [BaseList],
        components: {
            RxDialog,
        },
        props: {
            portalId: "",
        },
        data() {
            return {
                columns: [
                    {
                        title: this.$ti18('rxForm.name', '名称'),
                        dataIndex: 'name',
                        width: 100,
                        scopedSlots: {customRender: 'name'}
                    },
                    {
                        title: this.$ti18('rxList.action', '操作'),
                        width: 100,
                        dataIndex: 'action',
                        scopedSlots: {customRender: 'action'}
                    }
                ],
                //栏目列表
                layoutList: [],
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData(vals) {
                let self_ = this;
                insPortalUserDefApi.getDifferentCols(this.portalId).then(res => {
                    self_.layoutList = res;
                })
            },
            addColumn(record,index) {
                this.layoutList.splice(index,1);
                this.$emit("column", record);
            },
            cancel() {

            }
        }
    }
</script>
<style scoped>
.rx-center{
    border-radius: 5px;
    background: rgb(242,247,255);
    display: flex;
    height: 40px;
    align-items: center;
    padding: 10px;
}
.rx-center-name{
    margin-right: 20px;
    flex: 1;
    font-weight: bold;
}
.rx-center-add{
    color:rgb(0, 122, 255);
    font-size: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
</style>
